<template>
  <div class="productDetail">
    <el-dialog
      title="产品详情"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="true"
      :close-on-press-escape="false"
    >
      <el-form
        :model="product"
        :rules="rules"
        label-position="right"
        label-width="100px"
        ref="form"
      >
        <el-form-item label="产品首图" prop="firstImageUrl">
          <singleImgUpload :url.sync="product.firstImageUrl" dir="product"></singleImgUpload>
        </el-form-item>
        <div class="formItem">
          <el-form-item style="flex: 1;" label="产品名称" prop="cname">
            <el-input v-model="product.cname" />
          </el-form-item>
          <el-form-item style="flex: 1;" label="可选尺码" prop="sizes">
            <el-select v-model="sizess" multiple placeholder="请选择">
              <el-option
                v-for="item in productSizes"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <!-- <el-input v-model="product.sizes" /> -->
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item style="flex: 1;" label="系列">
            <el-select v-model="product.serialId" placeholder="请选择">
              <el-option
                v-for="item in productSerialId"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="flex: 1;" label="颜色" prop="colors">
            <el-select v-model="colors" multiple placeholder="请选择">
              <el-option
                v-for="item in productColor"
                :key="item.key"
                :label="item.label"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="formItem">
          <el-form-item style="flex: 1;" label="价格" prop="price">
            <el-input v-model="product.price" type="number" />
          </el-form-item>
          <el-form-item style="flex: 1;" label="折扣" prop="discount">
            <el-input v-model="product.discount" type="number" />
          </el-form-item>
        </div>
        <el-form-item style="flex: 1;" label="产品描述" prop="cdescription">
          <el-input type="textarea" rows="2" v-model="product.cdescription" />
        </el-form-item>
        <el-form-item style="flex: 1;" label="备注" prop="remark">
          <el-input type="textarea" rows="2" v-model="product.remark" />
        </el-form-item>
        <el-form-item label="产品缩略图" prop="thumbnail">
          <singleImgUpload :url.sync="product.thumbnail" dir="productImg"></singleImgUpload>
        </el-form-item>
        <el-form-item label="产品轮播视频" prop="detailVideo">
          <videoUpload
            ref="fileRef"
            dir="productVideo"
            v-bind:fileUrl.sync="product.detailVideo"
          ></videoUpload>
        </el-form-item>
        <!-- <el-form-item label="产品轮播图" prop="detailsImg">
          <multiImgUpload
            :imgList.sync="product.detailsImg"
            dir="productImg"
            :maxCount="20"
          ></multiImgUpload>
        </el-form-item> -->
        <el-form-item label="产品轮播图" prop="detailsImg">
          <ImgUpload
            :data.sync="product.detailsImg"
            dir="productImg"
            :maxCount="20"
            :multiple="true"
          ></ImgUpload>
        </el-form-item>
        <!-- <el-form-item label="产品介绍图" prop="introduceImg">
          <multiImgUpload
            :imgList.sync="product.introduceImg"
            dir="productImg"
            :maxCount="20"
          ></multiImgUpload>
        </el-form-item> -->
        <el-form-item label="产品介绍图" prop="introduceImg">
          <ImgUpload
            :data.sync="product.introduceImg"
            dir="productImg"
            :maxCount="20"
            :multiple="true"
          ></ImgUpload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmClick">确 定</el-button>
        <el-button @click="cancelClick">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import videoUpload from "@/components/common/videoUpload";
import singleImgUpload from "@/components/upload/SingleImgUpload.vue";
import multiImgUpload from "@/components/upload/MultiImgUpload.vue";
import ImgUpload from "@/components/upload/ImgUpload.vue";

export default {
  // id即编辑的id，visible属性用来监听是否显示弹窗
  props: ["id", "visible"],
  components: { singleImgUpload, multiImgUpload, videoUpload,ImgUpload },
  watch: {
    // id: function() {
    //   let that = this;
    //   if (that.id) {
    //     that.getProduct();
    //   } else {
    //       this.reset();
    //   }
    // }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      }
    }
  },
  data() {
    return {
      // 弹窗相关属性
      dialogFieldBox: false,
      productSerialId: [],
      productColor: [],
      productSizes:[10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50],
      colors:[],
      sizess:[],
      product: {
        id: null,
        cname: null,
        serialId: null,
        sizes: null,
        firstImageUrl: null,
        cdescription: null,
        color: null,
        price: null,
        discount: null,
        remark: null,
        // 缩略图
        thumbnail: null,
        // 产品轮播视频
        detailVideo: null,
        // 产品轮播图
        detailsImg: [],
        // 产品介绍图
        introduceImg: []
      },
      // 表单校验
      rules: {
        cname: [
          {
            required: true,
            message: "产品名称不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    async ininDict() {
      await get("dict/productSerial").then(res => {
        this.productSerialId = res.data.data;
      });
      await get("dict/productColor").then(res => {
        this.productColor = res.data.data;
      });
    },
    getProduct(id) {
      get("product/getSaveProductDetailDTO", { id: id }).then(res => {
        this.product = res.data.data;
        this.product.detailsImg=[];
        this.product.introduceImg=[];
        res.data.data.productImageList.forEach(item => {
          if (item.imageType === 1) {
            this.product.thumbnail = item.imageUrl;
          } else if (item.imageType === 2) {
            this.product.detailsImg.push(item.imageUrl);
          } else if (item.imageType === 3) {
            this.product.introduceImg.push(item.imageUrl);
          } else if (item.imageType === 4) {
            this.product.detailVideo = item.imageUrl;
          }
        });
        this.colors=[];
        if(this.product.color) {
          let temp=this.product.color.split(',');
          for(let i=0;i<temp.length;i++) {
            this.colors.push(Number.parseInt(temp[i]));
          }
        }
        this.sizess=[];
        if(this.product.sizes) {
          let temp=this.product.sizes.split(',');
          for(let i=0;i<temp.length;i++) {
            this.sizess.push(Number.parseInt(temp[i]));
          }
        }
      });
    },
    // 确认保存
    confirmClick() {
      let param = { ...this.product };
      param.productImageList = [];
      if (this.product.thumbnail) {
        param.productImageList.push({
          imageUrl: this.product.thumbnail,
          imageType: 1,
          showSort: 1
        });
      }
      this.product.detailsImg.forEach((item, index) => {
        param.productImageList.push({
          imageUrl: item,
          imageType: 2,
          showSort: index
        });
      });
      this.product.introduceImg.forEach((item, index) => {
        param.productImageList.push({
          imageUrl: item,
          imageType: 3,
          showSort: index
        });
      });
      if (this.product.detailVideo) {
        param.productImageList.push({
          imageUrl: this.product.detailVideo,
          imageType: 4,
          showSort: 1
        });
      }
      if(this.colors.length==0) {
        this.$message({ message: "颜色不能为空！", type: "warning" });
      }
      param.color=this.colors.join(",");
      if(this.sizess.length==0) {
        this.$message({ message: "尺码不能为空！", type: "warning" });
      }
      this.sizess.sort();
      param.sizes=this.sizess.join(",");
      this.$refs.form.validate(valid => {
        if (valid) {
          let url = this.product.id
            ? "/product/updateSaveProductDetailDTO":"/product/saveProductDetailDTO";
          postJson(url, param).then(res => {
            this.$message({ message: "操作成功", type: "success" });
            this.dialogVisible = false;
            this.$emit("success");
          });
        } else {
          return false;
        }
      });
    },
    cancelClick() {
      this.dialogVisible = false;
    },
    reset() {
      this.colors= [];
        this.product={
        id: null,
        cname: null,
        serialId: null,
        sizes: null,
        firstImageUrl: null,
        cdescription: null,
        color: null,
        price: null,
        discount: null,
        remark: null,
        // 缩略图
        thumbnail: null,
        // 产品轮播视频
        detailVideo: null,
        // 细节轮播图
        detailsImg: [],
        // 产品介绍图
        introduceImg: []
      };
      this.sizess=[];
      this.colors=[];
    },
    
  },
  mounted() {},
  created() {
    this.ininDict();
  }
};
</script>

<style lang="less">
</style>
